<template>
  <div class="detail">

    <el-dialog  title="题目预览"  :visible="dialogVisible" @close='canel'>
        <el-row>
            <el-col :span="6">【题型】{{form.questionType | changeQuestionType}}</el-col>
            <el-col :span="6">【编号】{{form.id}}</el-col>
            <el-col :span="6">【难度】{{form.difficulty | changeDifficulty}}</el-col>
            <el-col :span="6">【标签】{{form.tags}}</el-col>
        </el-row>

        <el-row>
            <el-col :span="6">【学科】{{form.subjectName}}</el-col>
            <el-col :span="6">【目录】{{form.directoryName}}</el-col>
            <el-col :span="6">【方向】{{form.direction}}</el-col>
        </el-row>

        <el-row>【题干】<br><p v-html="form.question"></p></el-row>
        <el-row  v-if="form.questionType!=='3'">
          <p>{{form.questionType | changeQuestionType}}题 选项：（以下选中的选项为正确答案）</p>
        </el-row>

       <el-row v-if="form.questionType==='1'">
          <div v-for="(item,index) in form.options" :key="index" style="margin-bottom:10px">
            <el-radio :value='item.isRight' :label="1" style="margin-right:10px">{{item.title}}</el-radio>
          </div>
        </el-row>

        <el-row v-if="form.questionType==='2'">
          <div v-for="(item,index) in form.options" :key="index" style="margin-bottom:10px">
            <el-checkbox :value='item.isRight===1?true:false' style="margin-right:10px"> {{item.title}}</el-checkbox>
          </div>
        </el-row>

        <el-row>
          【参考答案】 <el-button type="primary" size="mini" @click="playVideo" >视频答案预览</el-button>
        </el-row>
        <div class="video">
           <video id="myVideo"  controls v-show="videoShow"/>
        </div>
        <el-row>
          【答案解析】 <span v-html='form.answer'></span>
        </el-row>
        <el-row>
          【题目备注】{{form.remarks}}
        </el-row>
  <div slot="footer" class="dialog-footer" style="text-align:right">
    <el-button type="primary" @click="canel">关 闭</el-button>
  </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: ['dialogVisible'],
  data () {
    return {
      form: {

      },
      checkBoxRight: [],
      radioRight: '',
      videoShow: false
    }
  },
  methods: {
    // 关闭弹窗
    canel () {
      this.videoShow = false
      const vidio = document.getElementById('myVideo')
      vidio.pause()
      this.$emit('update:dialogVisible', false)
      this.form = {}
    },
    async getDetail (id) {
      const { data: res } = await detail({ id })
      this.form = res
    },
    // 播放视频
    playVideo () {
      if (this.form.videoURL) {
        this.videoShow = !this.videoShow
        const vidio = document.getElementById('myVideo')
        vidio.src = this.form.videoURL
        if (this.videoShow) {
          vidio.play()
        } else {
          vidio.pause()
        }
      } else {
        this.$message.error('视频不存在!')
      }
    }
  }

}
</script>

<style scoped>
.detail{
  position: relative;
}
.el-row{
  margin-bottom: 20px;
}
.video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* width: 300px;
  height:200px; */
}
video{
  width: 300px;
  height: 200px;
}
.closeBtn{
  position:absolute;
  top: 0;
  right: 0;
}
</style>
